<!DOCTYPE html>
<html lang="en">
<style>
  body {
    background-color: #f5f8fa;
  }

  .box {
    width: 400px;
    height: 500px;
    border: 1px solid #ccc;
    margin: 30px auto;
    position: relative;

  }

  .box>span {
    position: absolute;
    padding: 30px;
  }

  .box>a:nth-of-type(1) {
    position: absolute;
    right: 30px;
    padding: 30px;
  }

  .box>a:nth-of-type(2) {
    position: absolute;
    right: 0px;
    padding: 30px;
  }

  .box>p {
    width: 100%;
    border: 1px solid #ccc;
    margin-top: 70px;
  }

  .box>.zh {
    width: 80%;
    height: 50px;
    display: block;
    margin: 10px auto;
  }

  .box>.emial {
    width: 80%;
    height: 50px;
    display: block;
    margin: 10px auto;
  }

  .box>.mm {
    width: 80%;
    height: 50px;
    display: block;
    margin: 10px auto;
  }

  .box>.qm {
    width: 80%;
    height: 50px;
    display: block;
    margin: 10px auto;
  }

  .box>.zc {
    display: block;
    margin-left: 30px;
  }


  .box>.login {
    display: block;
    width: 85%;
    height: 50px;
    background-color: blue;
    color: white;
    margin: 80px auto;
  }
</style>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>注册</title>
</head>

<body>
  <div class="box">
    <span>注册胶囊</span>
    <a href="btn_logn.html">已有账号？</a>
    <a href="btn_logn.html">登录</a>
    <p></p>
    <input class="zh" type="text" placeholder="你的名字">
    <input class="emial" type="text" placeholder="登陆邮箱">
    <input class="mm" type="number" placeholder="登陆密码">
    <input class="qm" type="number" placeholder="确认密码">
    <span class="zc">注册即代表你同意《胶囊协议》</span>
    <button class="login">注册</button>


  </div>
</body>
<script src="../../js/ys/enroll.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

</html>